<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理系统 - 订单管理</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <style>
        body {
            padding-top: 56px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        .sidebar {
            min-height: calc(100vh - 56px);
            position: fixed;
            top: 56px;
            left: 0;
            width: 200px;
            z-index: 100;
            padding: 20px 0;
            box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
            background-color: #343a40;
        }
        .sidebar .nav-link {
            color: #ddd;
            padding: 0.5rem 1rem;
        }
        .sidebar .nav-link:hover {
            color: #fff;
            background-color: rgba(255, 255, 255, 0.1);
        }
        .sidebar .nav-link.active {
            color: #fff;
            background-color: rgba(255, 255, 255, 0.2);
        }
        .sidebar .nav-link i {
            margin-right: 8px;
        }
        .main-content {
            margin-left: 200px;
            padding: 20px;
            flex: 1;
        }
        .status-badge {
            display: inline-block;
            min-width: 80px;
            text-align: center;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-dark bg-dark fixed-top">
        <a class="navbar-brand" href="${pageContext.request.contextPath}/admin">
            <i class="fas fa-dumbbell"></i> 体育商城后台管理
        </a>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="fas fa-user-shield"></i> 管理员
                </a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="${pageContext.request.contextPath}/" target="_blank">
                        <i class="fas fa-store"></i> 访问商城
                    </a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="${pageContext.request.contextPath}/admin/logout">
                        <i class="fas fa-sign-out-alt"></i> 退出登录
                    </a>
                </div>
            </li>
        </ul>
    </nav>

    <!-- 侧边栏 -->
    <jsp:include page="sidebar.jsp" />

    <!-- 主要内容 -->
    <div class="main-content">
        <div class="container-fluid">
            <!-- 标题行 -->
            <div class="row mb-4">
                <div class="col-md-6">
                    <h2 class="mb-1">订单管理</h2>
                    <p class="text-muted">管理所有客户订单</p>
                </div>
            </div>
            
            <!-- 搜索过滤器 -->
            <div class="row mb-4">
                <div class="col-md-12">
                    <div class="card shadow-sm">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="searchOrderNo">订单号</label>
                                        <input type="text" class="form-control" id="searchOrderNo" placeholder="输入订单号">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="searchStatus">订单状态</label>
                                        <select class="form-control" id="searchStatus">
                                            <option value="">全部状态</option>
                                            <option value="10">未付款</option>
                                            <option value="20">已付款</option>
                                            <option value="30">已发货</option>
                                            <option value="40">已完成</option>
                                            <option value="50">已关闭</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="searchUserId">用户ID</label>
                                        <input type="number" class="form-control" id="searchUserId" placeholder="输入用户ID">
                                    </div>
                                </div>
                                <div class="col-md-3 d-flex align-items-end">
                                    <button class="btn btn-primary btn-block" id="searchBtn">
                                        <i class="fas fa-search"></i> 搜索
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 订单列表 -->
            <div class="row">
                <div class="col-md-12">
                    <div class="card shadow-sm">
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>订单号</th>
                                            <th>用户ID</th>
                                            <th>支付金额</th>
                                            <th>支付方式</th>
                                            <th>订单状态</th>
                                            <th>创建时间</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="orderTableBody">
                                        <tr>
                                            <td colspan="7" class="text-center">正在加载数据...</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            
                            <!-- 分页 -->
                            <nav aria-label="Page navigation" class="mt-4">
                                <ul class="pagination justify-content-center" id="pagination">
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- jQuery 和 Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        $(document).ready(function() {
            let currentPage = 1;
            let pageSize = 10;
            let totalPages = 0;
            
            // 加载订单列表
            function loadOrders(page = 1) {
                currentPage = page;
                
                let url = "${pageContext.request.contextPath}/admin/orders/list?pageNum=" + page + "&pageSize=" + pageSize;
                
                // 添加过滤条件
                const orderNo = $('#searchOrderNo').val();
                const status = $('#searchStatus').val();
                const userId = $('#searchUserId').val();
                
                if (orderNo) url += "&orderNo=" + encodeURIComponent(orderNo);
                if (status) url += "&status=" + status;
                if (userId) url += "&userId=" + userId;
                
                $.get(url, function(res) {
                    if (res.code === 200 || res.success === true) {
                        renderOrders(res.data.records || []);
                        renderPagination(res.data.current, res.data.pages);
                        totalPages = res.data.pages;
                    } else {
                        alert("加载订单失败: " + (res.message || res.msg));
                    }
                });
            }
            
            // 渲染订单列表
            function renderOrders(orders) {
                const $tbody = $('#orderTableBody');
                $tbody.empty();
                
                if (orders.length === 0) {
                    $tbody.html('<tr><td colspan="7" class="text-center">没有找到订单数据</td></tr>');
                    return;
                }
                
                orders.forEach(function(order) {
                    // 获取状态标签
                    let statusBadge = '';
                    let statusText = '';
                    
                    switch(order.status) {
                        case 10:
                            statusBadge = '<span class="badge badge-warning status-badge">未付款</span>';
                            statusText = '未付款';
                            break;
                        case 20:
                            statusBadge = '<span class="badge badge-info status-badge">已付款</span>';
                            statusText = '已付款';
                            break;
                        case 30:
                            statusBadge = '<span class="badge badge-primary status-badge">已发货</span>';
                            statusText = '已发货';
                            break;
                        case 40:
                            statusBadge = '<span class="badge badge-success status-badge">已完成</span>';
                            statusText = '已完成';
                            break;
                        case 50:
                            statusBadge = '<span class="badge badge-secondary status-badge">已关闭</span>';
                            statusText = '已关闭';
                            break;
                        default:
                            statusBadge = '<span class="badge badge-dark status-badge">未知</span>';
                            statusText = '未知状态';
                    }
                    
                    const createTime = order.createTime ? new Date(order.createTime).toLocaleString() : '';
                    const paymentTypeText = order.paymentType === 1 ? '在线支付' : '未知方式';
                    
                    // 操作按钮
                    let actionBtns = '<a href="${pageContext.request.contextPath}/admin/orders/detail/' + order.orderNo + '" class="btn btn-sm btn-outline-info mr-1"><i class="fas fa-eye"></i> 详情</a>';
                    
                    // 只有已付款未发货的订单才能发货
                    if (order.status === 20) {
                        actionBtns += '<button class="btn btn-sm btn-outline-primary ship-btn" data-order-no="' + order.orderNo + '"><i class="fas fa-shipping-fast"></i> 发货</button>';
                    }
                    
                    let tr = '<tr>' +
                        '<td>' + order.orderNo + '</td>' +
                        '<td>' + order.userId + '</td>' +
                        '<td>￥' + order.payment + '</td>' +
                        '<td>' + paymentTypeText + '</td>' +
                        '<td>' + statusBadge + '</td>' +
                        '<td>' + createTime + '</td>' +
                        '<td>' + actionBtns + '</td>' +
                        '</tr>';
                    $tbody.append(tr);
                });
                
                // 绑定发货按钮事件
                $('.ship-btn').click(function() {
                    const orderNo = $(this).data('order-no');
                    shipOrder(orderNo);
                });
            }
            
            // 渲染分页
            function renderPagination(current, total) {
                const $pagination = $('#pagination');
                $pagination.empty();
                
                if (total <= 1) return;
                
                // 上一页
                $pagination.append(
                    '<li class="page-item ' + (current === 1 ? 'disabled' : '') + '">' +
                    '<a class="page-link" href="javascript:void(0)" data-page="' + (current - 1) + '" aria-label="Previous">' +
                    '<span aria-hidden="true">&laquo;</span>' +
                    '</a>' +
                    '</li>'
                );
                
                // 页码
                let startPage = Math.max(1, current - 2);
                let endPage = Math.min(total, startPage + 4);
                
                if (endPage - startPage < 4) {
                    startPage = Math.max(1, endPage - 4);
                }
                
                for (let i = startPage; i <= endPage; i++) {
                    $pagination.append(
                        '<li class="page-item ' + (i === current ? 'active' : '') + '">' +
                        '<a class="page-link" href="javascript:void(0)" data-page="' + i + '">' + i + '</a>' +
                        '</li>'
                    );
                }
                
                // 下一页
                $pagination.append(
                    '<li class="page-item ' + (current === total ? 'disabled' : '') + '">' +
                    '<a class="page-link" href="javascript:void(0)" data-page="' + (current + 1) + '" aria-label="Next">' +
                    '<span aria-hidden="true">&raquo;</span>' +
                    '</a>' +
                    '</li>'
                );
                
                // 绑定分页点击事件
                $('.page-link').click(function() {
                    if (!$(this).parent().hasClass('disabled') && !$(this).parent().hasClass('active')) {
                        const page = $(this).data('page');
                        loadOrders(page);
                    }
                });
            }
            
            // 发货处理
            function shipOrder(orderNo) {
                if (confirm('确定要为订单 ' + orderNo + ' 发货吗？')) {
                    $.ajax({
                        url: "${pageContext.request.contextPath}/admin/orders/ship/" + orderNo,
                        type: "POST",
                        success: function(res) {
                            if (res.code === 200 || res.success === true) {
                                alert("发货成功");
                                loadOrders(currentPage);
                            } else {
                                alert("发货失败: " + (res.message || res.msg));
                            }
                        },
                        error: function() {
                            alert("发货失败，服务器错误");
                        }
                    });
                }
            }
            
            // 搜索按钮点击
            $('#searchBtn').click(function() {
                loadOrders(1);
            });
            
            // 回车搜索
            $('#searchOrderNo, #searchUserId').keypress(function(e) {
                if (e.which === 13) {
                    loadOrders(1);
                }
            });
            
            // 初始加载
            loadOrders();
        });
    </script>
</body>
</html> 